<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>个人提交记录</title>
  <!-- 引入 Tabulator CSS -->
  <!-- 引入 Tabulator 6.3 CSS -->
  <link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet">
<!-- 引入 Tabulator 现代主题 CSS -->
<!--  <link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator_modern.min.css" rel="stylesheet">-->
  <link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator_simple.min.css" rel="stylesheet">
<!--  <link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator_midnight.min.css" rel="stylesheet">-->
<!--  <link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator_site.min.css" rel="stylesheet">-->
<!--  <link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator_site_dark.min.css" rel="stylesheet">-->

</head>
<body>
<h1>个人提交记录</h1>

<!-- 筛选表单 -->
<div>
  <label>开始日期: <input type="date" id="start-date"></label>
  <label>结束日期: <input type="date" id="end-date"></label>
  <label>提交消息搜索: <input type="text" id="commit-message" placeholder="commit message"></label>
  <label>作者邮箱: <input type="text" id="author-email" placeholder="author_email(可选)"></label>
  <button id="filter-btn">筛选</button>
</div>

<!-- 表格容器 -->
<div id="submissions-table"></div>

<!-- 引入 Tabulator JS -->
<!-- 引入 Tabulator 6.3 JS -->
<script src="https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js"></script>

<script>
  // 初始化表格
  let table = new Tabulator("#submissions-table", {
<!--  height: "500px",-->
  theme: "simple", // 应用现代主题
  layout: "fitColumns",
  pagination: "local", // 启用本地分页
  paginationSize: 10, // 每页显示 10 条记录
  paginationSizeSelector: [5, 10, 20, 50], // 用户可选择每页条数
  columns: [
    {title: "Commit ID", field: "commit_id", widthGrow: 1},
    {title: "Lines Added", field: "lines_added", sorter: "number", widthGrow: 1},
    {title: "Lines Deleted", field: "lines_deleted", sorter: "number", widthGrow: 1},
    {title: "Commit Date", field: "commit_date", sorter: "datetime", widthGrow: 2},
    {title: "Author", field: "author_email", widthGrow: 2},
    {title: "Project", field: "project_name", widthGrow: 2},
    {title: "Message", field: "commit_message", widthGrow: 2},
  ],
});

  // 定义加载数据的函数
  function loadTableData() {
    let startDate = document.getElementById('start-date').value;
    let endDate = document.getElementById('end-date').value;
    let commitMessage = document.getElementById('commit-message').value;
    let authorEmail = document.getElementById('author-email').value;

    let params = new URLSearchParams();
    if (startDate) params.append("start_date", startDate);
    if (endDate) params.append("end_date", endDate);
    if (commitMessage) params.append("commit_message", commitMessage);
    if (authorEmail) params.append("author_email", authorEmail);

    table.setData("/api/personal_submissions_data?" + params.toString());
  }

  // 在表格完全构建后加载数据
  table.on("tableBuilt", function(){
    loadTableData();
  });

  // 点击筛选按钮时加载数据
  document.getElementById('filter-btn').addEventListener('click', () => {
    loadTableData();
  });
</script>

</body>
</html>
